<template>
	<view class="relative">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<wlk-navbar title="推广线路" navbarType='3'></wlk-navbar>
		<wlk-canvas mode="line" :item="shareLine" :qrcode="qrcode" ref="childComponent"></wlk-canvas>
	
		<view class="line-content">
			<u-sticky>
				<view class="head-box">
					<u-search placeholder="请输入关键词/目的地" disabled v-model="keyword" :showAction="false"
						@click="jump(keyword)" :searchIconColor="themeColor" margin="0 0 30rpx 0"></u-search>
					<view class="wlkflex">
						<view class="tab-item center" @click="changeOrder('default')"
							:style="order=='default'?'color:'+themeColor:''">默认</view>
						<view class="tab-item center wlkflex justify-center" @click="changeOrder('commission')">
							<view :style="order=='commission'?'color:'+themeColor:''">佣金</view>
							<view class="ml05 wlkflex wrap align-content-between order">
								<view class="wd100">
									<u-icon name="arrow-up" bold size="5"
										:color="commissionOrder=='asc'?themeColor:''"></u-icon>
								</view>
								<view class="wd100">
									<u-icon name="arrow-down" bold size="5"
										:color="commissionOrder=='desc'?themeColor:''"></u-icon>
								</view>
							</view>
						</view>
						<view class="tab-item center wlkflex justify-center" @click="changeOrder('price')">
							<view :style="order=='price'?'color:'+themeColor:''">价格</view>
							<view class="ml05 wlkflex wrap align-content-between order">
								<view class="wd100">
									<u-icon name="arrow-up" bold size="5"
										:color="priceOrder=='asc'?themeColor:''"></u-icon>
								</view>
								<view class="wd100">
									<u-icon name="arrow-down" bold size="5"
										:color="priceOrder=='desc'?themeColor:''"></u-icon>
								</view>
							</view>
						</view>
						<view class="tab-item center" :style="any?'color:'+themeColor:''" @click="setRight(true)">筛选
						</view>
					</view>
				</view>
			</u-sticky>
			<u-popup :show='showRight' @close='setRight(false)' mode='right'>
				<view class="popup">
					<view class="title gray6 f30 pl20 pb20">筛选</view>
					<scroll-view class="list" scroll-y>
						<view v-for="(item,index) in tag" :key="index" class="mt50">
							<view class="t1 f30 pl40 pt10 fb">{{item.title}}</view>
							<view class="item d-s-c f-w mt25 pl30 pr30">
								<view @click="setName(index,i)" v-for="(e,i) in item.child" :key="i"
									:class="e.checked?'active white':''" class="i1 p10 f22 d-c-c tc m10">
									{{e.name}}
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="btn mt20 d-b-c tc p20">
						<view class="flex-1 mr10">
							<u-button text='重置' @click="reset" plain></u-button>
						</view>
						<view class="flex-1">
							<u-button text='确定' @click="setRight(false)" color='#FAC033'></u-button>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<u-tabs :list="list" @click="choose" lineWidth="30"></u-tabs>
		<view class="line-content pd30">
			<block v-if="loadStatus=='nomore' && lines.length==0">
				<view class="not-data">
					<u-empty :icon="uEmpty.search" text="没有搜索结果">
					</u-empty>
				</view>
			</block>
			<block v-else>
				<navigator class="line-info mt30 wlkflex justify-between wd100 align-start relative"
					:url="'/pages/line/detail?id=' + line.lineInfo.id" v-for="(line,index) in lines">
					<view class="o-info-img br04 overHidden">
						<image class="wd100 hg100" lazy-load :src="line.lineInfo.images[0]" mode="aspectFill" />
					</view>
					<view class="o-info-main">
						<view class="o-main-title u-line-2">
							{{line.lineInfo.title}}
						</view>
						<view class="o-main-desc u-line-1 mt10">
							{{line.lineInfo.desc}}
						</view>
						<view class="wlkflex justify-between mt15">
							<view>
								<view>
									<text>路线价格：</text>
									<text class="o-main-price">¥
										<text class="ml05">{{ line.total_price }}</text>
									</text>
								</view>
								<view>
									<text>预估佣金：</text>
									<text class="o-main-price">¥
										<text class="ml05">{{ line.expect_price }} /人</text>
									</text>
								</view>
							</view>
							<view class="share-box" @tap.stop="setShare(line.lineInfo)">
								<u-button :customStyle="{
									margin:'0',
									fontSize:'14rpx',
									boxShadow:boxShadow,
									height:'70rpx'
								}" :color="linearColor" shape="circle" text="推广">
								</u-button>
							</view>
						</view>
					</view>
					<view class="line-start">
						{{line.lineInfo.startcity[line.lineInfo.startcity.length-1].name}}出发
					</view>
				</navigator>
				<view class="load-more">
					<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
						:nomore-text="nomoreText" dashed line />
				</view>
			</block>
		</view>
		<u-popup safeAreaInsetBottom :customStyle="shareStyle" :show="showShare" @close="closeShare" round="20">
			<view class="share-box">
				<view class="pd30">
					<view class="center title">立即推广</view>
					<view class="share-btn-info wlkflex">
						<!-- #ifdef H5 || MP-WEIXIN -->
						<block v-if="platform=='wxMiniProgram'">
							<button open-type="share" @share='onShareAppMessage' class="wlkflex justify-center wrap">
								<view class="icon-box wlkflex justify-center" style="background-color: #07c160">
									<u-icon name="weixin-fill" size="32" color="#FFFFFF"></u-icon>
								</view>
								<view class="btn-name wd100 center mt10">微信好友</view>
							</button>
						</block>
						<block v-else-if="platform=='wxOfficialAccount'">
							<view class="wlkflex justify-center wrap" @click="showH5Share=true">
								<view class="icon-box wlkflex justify-center" style="background-color: #07c160">
									<u-icon name="weixin-fill" size="32" color="#FFFFFF"></u-icon>
								</view>
								<view class="btn-name wd100 center mt10">微信好友</view>
							</view>
						</block>
						<block v-else>
							<view class="wlkflex justify-center wrap" @click="copyLink">
								<view class="icon-box wlkflex justify-center">
									<i class="gg-link"
										style="color: #606266;transform: rotate(-45deg) scale(var(--ggs, 1.2));"></i>
								</view>
								<view class="btn-name wd100 center mt10">复制链接</view>
							</view>
						</block>
						<!-- #endif -->
						<view class="wlkflex justify-center wrap" @click="canvas">
							<view class="icon-box wlkflex justify-center">
								<u-icon name="photo-fill" size="32" :color="themeColor"></u-icon>
							</view>
							<view class="btn-name wd100 center mt10">分享海报</view>
						</view>
					</view>
				</view>
				<u-gap height="8" bgColor="#F9F9F9"></u-gap>
				<view class="close center" @click="closeShare">取消</view>
			</view>
		</u-popup>
		<u-overlay :show="showH5Share" @click="showH5Share = false">
			<view class="wd100 hg100">
				<image src="/static/images/other/share.png" class="share-image" mode="widthFix"></image>
			</view>
		</u-overlay>
		<view class="bg-icon">
			<image class="wd100 br04" :src="images.texture" mode="widthFix" />
		</view>
	</view>
</template>
<script>
	var _self;
	import {
		rgbaToRgb,
		toUrl,
		copy
	} from '@/wlkutils/tools';
	import platform from "@/wlkutils/platform";
	import share from "@/wlkutils/share";
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters(['userInfo', 'themeColor', 'isLogin', 'images', 'uEmpty']),
			any() {
				return this.tag.some(item => item.child.some(e => e.checked))
			}
		},
		data() {
			return {
				boxShadow: '',
				linearColor: '',
				list: [],
				lines: [],
				systemInfo: uni.getSystemInfoSync(),
				page: 1,
				loadStatus: 'loading',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				keyword: '',
				shareStyle: {},
				showShare: false,
				showH5Share: false,
				platform: platform.get(),
				shareLine: {},
				showCanvas: false,
				commissionOrder: '',
				priceOrder: '',
				qrcode: '',
				tag: [],
				order: 'default',
				showRight: false,
			};
		},
		onLoad(options) {
			_self = this;
			if (options.keyword) {
				_self.keyword = options.keyword
			}
			this.page = 1;
			this.lines = [],
			this.getData();
			this.getList();
			this.getTag();
		},
		onShow() {
			this.linearColor = 'linear-gradient(to right,' + this.themeColor + ' ,' + uni.$u.colorToRgba(rgbaToRgb(this
				.themeColor), 0.75) + ')';
			this.boxShadow = '0px 5px 5px ' + uni.$u.colorToRgba(rgbaToRgb(this.themeColor), .2);
		},
		watch: {
			isLogin(val) {
				if (val) {
					_self.getData();
				}
			},
			themeColor(val) {
				this.linearColor = 'linear-gradient(to right,' + val + ' ,' + uni.$u.colorToRgba(rgbaToRgb(val), 0.75) +
					')';
				this.boxShadow = '0px 5px 5px ' + uni.$u.colorToRgba(rgbaToRgb(val), .2);
			}
		},
		onShareAppMessage(res) {
			let data = new Object();
			data.title = this.shareLine.title;
			data.desc = this.shareLine.desc;
			data.params = {
				id: this.shareLine.id
			};
			data.path = 'pages/line/detail';
			data.imageUrl = this.shareLine.images[0].poster ? this.shareLine.images[1].url : this.shareLine.images[0];
			return share.setShareInfo(data);
		},
		methods: {
			...mapMutations(["setLoginPopupShow"]),
			changeOrder(val) {
				if (val == 'commission') {
					if (uni.$u.test.isEmpty(this.commissionOrder)) {
						this.commissionOrder = 'asc';
					} else {
						this.commissionOrder = this.commissionOrder == 'asc' ? 'desc' : 'asc';
					}
				} else if (val == 'price'){
					if (uni.$u.test.isEmpty(this.priceOrder)) {
						this.priceOrder = 'asc';
					} else {
						this.priceOrder = this.priceOrder == 'asc' ? 'desc' : 'asc';
					}
				} else {
					this.commissionOrder = '';
					this.priceOrder = '';
				}
				if (this.order != val || val == 'commission' || val == 'price') {
					this.order = val;
					this.page = 1;
					this.loadStatus = 'loading';
					this.lines = [];
					this.getData();
				}
			},
			reset() {
				this.tag.map(item => item.child.map(e => e.checked = false))
				this.page = 1;
				this.lines = [];
				this.loadStatus = 'loading';
				this.getData()
				this.setRight(false)
			},
			setName(index, i) {
				this.tag[index].child[i].checked = !this.tag[index].child[i].checked
				let lines = []
				this.tag.map(item => item.child.map(e => e.checked ? lines.push(e.id) : ''))
				this.tags = lines.join(',')
				this.page = 1;
				this.lines = [];
				this.loadStatus = 'loading';
				this.getData()
			},
			setRight(bool) {
				this.showRight = bool
			},
			async getTag() {
				const res = await uni.$u.http.post("line/getTag")
				if (res.code == 1) {
					res.data.map(item => item.child.map(e => e.checked = false))
					this.tag = res.data
				}
			},
			getList() {
				uni.$u.http.post('commission/getCity', {}).then(res => {
					this.list = res.data
				}).catch(res => {})
			},
			choose(item) {
				this.lines = []
				this.page = 1
				this.getData(item.id)
			},
			onReachBottom() {
				if (this.loadStatus == "nomore") {
					return;
				}
				this.page++;
				this.getData();
			},
			async getData(id) {
				const res = await uni.$u.http.post('commission/getCommissionLine', {
					id: id,
					page: this.page,
					keyword: this.keyword,
					order: this.order,
					tags: this.tags,
					priceOrder: this.priceOrder,
					commissionOrder: this.commissionOrder,
				});
				console.log(this.keyword)
				if (res && res.data && res.data.lines) {
					this.lines = this.lines.concat(res.data.lines);
				}
				this.loadStatus = res.data.lines.length < res.data.limit ? 'nomore' : 'loadmore';
			},
			jump(path) {
				toUrl(path);
			},
			setShare(v) {
				this.shareLine = v;
				this.showShare = true;
			},
			init() {
				this.loadStatus = 'loading';
				this.page = 1;
				this.teams = [];
				this.getData();
			},

			initShareInfo() {
				let data = new Object();
				data.title = this.shareLine.title;
				data.desc = this.shareLine.desc;
				data.params = {
					id: this.shareLine.id
				};
				data.imageUrl = this.shareLine.images[0].poster ? this.shareLine.images[1].url : this.shareLine.images[0];
				data.path = 'pages/line/detail';
				return share.setShareInfo(data);
			},
			closeShare() {
				this.showShare = false;
			},
			copyLink() {
				let shareInfo = this.initShareInfo();
				copy(shareInfo.copyLink);
				_self.showShare = false;
			},
			async canvas() {
				if (!this.isLogin) {
					this.showShare = false;
					this.setLoginPopupShow(true);
					return false;
				}
				// 渲染
				// #ifndef MP
				let shareInfo = this.initShareInfo();
				this.qrcode = shareInfo.copyLink;
				this.$refs.childComponent.canvas();
				this.showShare = false;
				// #endif
				// #ifdef MP
				let res = await uni.$u.http.post('wechat/getUnlimitedQRCode', {
					id: this.shareLine.id,
					type: 'line'
				}, {
					custom: {
						hideMsg: true
					}
				}).then(res => {
					_self.qrcode = res.data;
					_self.$refs.childComponent.canvas();
					_self.showShare = false;
				})
				// #endif
			},
			jump(index) {
				toUrl('/pages/line/search?keyword=' + index + '&url=/pages/plugins/commission/line');
			},
		}
	}
</script>
<style lang="scss">
	.popup {
		height: 100vh;
		width: 60vw;
		font-family: '黑体';
	
		.title {
			padding-top: 180rpx;
			background-color: #f6f6f6;
	
		}
	
		.list {
			height: 70vh;
	
			.i1 {
				background-color: #eee;
				height: 80rpx;
				border-radius: 20rpx;
				width: calc(50% - 20rpx);
			}
	
			.active {
				background-color: #fff4da;
				color: #f6c135;
				position: relative;
	
				&:before {
					content: "\ec9e";
					position: absolute;
					color: #fff;
					background-color: #FAC033;
					bottom: 0;
					right: 0;
					font-family: "iconfont";
					padding: 5rpx;
					font-size: 20rpx;
					border-radius: 8rpx;
					display: inline-block;
					width: 20rpx;
					height: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
	
	page {
		background-color: #FFFFFF;

		.line-content {
			.line-info {
				.o-info-img {
					width: 220rpx;
					height: 220rpx;
					text-align: center
				}

				.o-info-main {
					font-size: $font-base;
					width: 66%;
					padding: 10rpx 0;

					.o-main-title {
						font-size: $font-lt;
						font-weight: bold;
					}

					.o-main-desc {
						font-size: $font-sm;
						color: $uni-text-color-grey;
					}

					.tags {
						margin-top: 8rpx;

						.tags-item {
							margin-right: 10rpx;
						}
					}

					.o-main-price {
						font-size: $font-base;
						color: $-tour-price-color;
					}

					.share-box {
						width: 32%;
					}
				}
			}

			.line-start {
				position: absolute;
				left: 0;
				top: 0;
				font-size: $font-sm;
				background-color: rgba(0, 0, 0, 0.18);
				border-radius: 4px 0 4px 0;
				padding: 6rpx 10rpx;
				color: #FFFFFF;
			}

		}

		.bg-icon {
			position: absolute;
			top: -220rpx;
			right: -220rpx;
			z-index: -1;
			width: 100%;
			height: 700rpx;
			opacity: .1;
			overflow: hidden;
		}

		.share-box {
			.title {
				font-size: $font-base;
				color: $uni-text-color;
				padding: 10rpx;
			}

			.share-btn-info {
				margin: 50rpx 0 20rpx 0;

				button {
					margin: 0;
				}

				.btn-name {
					font-size: $font-sm;
					color: $uni-text-color-grey;
				}

				.icon-box {
					width: 95rpx;
					height: 95rpx;
					border-radius: 50%;
					background-color: #F9F9F9;

				}
			}

			.close {
				line-height: 100rpx;
			}
		}

		.share-image {
			width: 100%;
		}
	}
	
	.line-content {
		.head-box {
			background-color: #FFFFFF;
			padding: 30rpx 30rpx 20rpx 30rpx;
	
			.tab-item {
				width: 33.33%;
				font-size: $font-lt;
	
				.order {
					height: 25rpx;
					width: 24rpx;
				}
			}
		}
	}
</style>